<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext JS 3.2.1 - grid scrollOffset test</title>
<link rel="StyleSheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	var jsonStore = new Ext.data.JsonStore({
		url: '321-grid-scrolloffset-test.json',
		autoLoad: true,
		root: 'items',
		fields: [
			'artist', 'title', 'album', 
			{name: 'track', type: 'int'}, 
			{name: 'duration', type: 'number'}
		]
	});

	var jsonStoreMore = new Ext.data.JsonStore({
		url: '321-grid-scrolloffset-test-more.json',
		autoLoad: true,
		root: 'items',
		fields: [
			'artist', 'title', 'album', 
			{name: 'track', type: 'int'}, 
			{name: 'duration', type: 'number'}
		]
	});


	var contextMenu = new Ext.menu.Menu({
		plain: true,
		autoDestroy: true,
		items: [{
			xtype: 'menuseparator'
		}, {
			xtype: 'displayfield',
			itemId: 'selected'
		}, {
			xtype: 'menuseparator'
		}]
	});
	
	var colModel = new Ext.grid.ColumnModel({
		defaults: {
			sortable: true
		},
		columns: [
			{header: 'artist', dataIndex: 'artist'},
			{header: 'title', dataIndex: 'title'}
		]
	});

	var obj = {
		title: 'Grid with less data',
		width: 400,
		height: 200,
		viewConfig: {
			forceFit: true
		},

		colModel: colModel,
		store: jsonStore,

		bbar: new Ext.PagingToolbar({
			store: jsonStore
		})
	};
	var grid = new Ext.grid.GridPanel(obj);

	var obj2 = {
		title: 'Grid with less data',
		width: 400,
		height: 200,
		viewConfig: {
			forceFit: true
		},

		colModel: colModel,
		store: jsonStoreMore,

		bbar: new Ext.PagingToolbar({
			store: jsonStoreMore
		})
	};
	var grid2 = new Ext.grid.GridPanel(obj2);
	
	var onLayout = function() {
		var els = this.el.select('.x-grid3-scroller', this);
		var scroller = els.elements[0];

		if (scroller.clientWidth === scroller.offsetWidth) {
			// no scroller
			this.scrollOffset = 2;
		} else {
			// scroller
			this.scrollOffset = undefined;
		}
		this.fitColumns(false);
	};
	
	Ext.apply(obj, {
		bbar: new Ext.PagingToolbar({
			store: jsonStore
		}),
		viewConfig: {
			onLayout: onLayout
		}
	});
	var gridFixed = new Ext.grid.GridPanel(obj);

	Ext.apply(obj2, {
		bbar: new Ext.PagingToolbar({
			store: jsonStoreMore
		}),
		viewConfig: {
			onLayout: onLayout
		}
	});
	var gridFixed2 = new Ext.grid.GridPanel(obj2);

	var dummy = new Ext.Window({
		//renderTo: 'container',
		autoShow: true,
		y: 10,
		x: 10,
		layout: 'fit',
		width: 400,
		height: 300,
		items: [gridFixed2]
	});
	dummy.show();
/*
	var ct = new Ext.Panel({
		renderTo: 'container',
		border: false,
		width: 800,
		height: 600,
		layout: 'table',
		layoutConfig: {
			columns: 2
		},
		items: [grid, grid2, gridFixed, gridFixed2]
	});
*/
});
</script>
</head>
<body>

<div id="container">
</div>

<div id="footer" style="font-size: 80%; width: 90%; bottom: 0px; position: fixed; padding: 5px;"><a href="http://franks543.blogspot.com/" target="_blank">Frank的五四三</a></div>
</body>
</html>

